<template>
  <div class="tab-cont tab-cont-cardpwd">
    <div class="title lg:!px-0">
      <div class="row flexbox flex-align-center flex-justify-between">
        <h1 class="name">{{ $t('userPanel.cardpwd') }}</h1>
      </div>
    </div>
    <div class="check flexbox flex-tb flex-center" v-if="!cardpwdValid">
      <img
        class="img"
        loading="lazy"
        src="https://cd.sealmg.com/assets/img/reset-pwd-img.png"
        alt="Reset password illustration"
        title="Password verification"
      />
      <div class="title capitalize">{{ $t('formTitle.verifyPwd') }}</div>
      <div class="desc capitalize">{{ $t('formItemDesc.checkAccount') }}</div>
      <div class="label">{{ $t('formItem.password') }}</div>
      <div class="input">
        <el-input v-model="cardpwdForm.password" type="password">
          <img
            loading="lazy"
            slot="prefix"
            class="input-icon"
            src="https://cd.sealmg.com/assets/img/pwd-icon.png"
            alt="Password input icon"
            title="Enter password"
          />
        </el-input>
      </div>
      <div class="handle">
        <el-button class="theme-btn" :disabled="cardpwdForm.password ? false : true" @click="checkCardpwd">{{ $t('formBtn.verify') }}</el-button>
      </div>
    </div>
    <div class="list" v-else>
      <div class="item" v-for="item in cardpwdList" :key="item.id">
        <div class="info flexbox flex-align-center flex-justify-between">
          <div class="order flexbox flex-align-center flex gap-2">
            <span class="label">{{ $t('userInfo.orderNo') }}</span>
            <span class="no" @click="goOrderPay(item)">{{ item.order_info.order_no }}</span>
          </div>
          <span class="date">{{ item.create_time }}</span>
        </div>
        <div class="bottom">
          <div class="goods flexbox flex-align-center" v-if="item.order_good">
            <img
              class="goods-img"
              v-if="item.order_good.goods_info"
              v-lazy="$globalFn.imgPrefixUrl(item.order_good.goods_info.image, '56:56')"
              alt="Product thumbnail"
              title="Order product preview"
            />
            <div class="goods-base">
              <div class="goods-title">{{ item.order_good.goods_name }}</div>
              <div class="goods-desc" v-if="item.order_good.goods_info && item.order_good.goods_info.sku">
                {{ item.order_good.goods_info.sku.title }}
              </div>
            </div>
          </div>
          <!-- <div class="bottom-row flexbox flex-align-center flex-justify-between">
                        <span class="label">{{$t('formItem.continuity')}}</span>
                        <span class="cont">{{item.supplier_code}}</span>
                    </div> -->
          <div class="bottom-row flexbox flex-align-center flex-justify-between" v-if="item.card_no">
            <span class="label">PIN CODE</span>
            <span class="cont">{{ item.card_no }}</span>
          </div>
          <div class="bottom-row flexbox flex-align-center flex-justify-between" v-if="item.card_unique">
            <span class="label">SN CODE</span>
            <span class="cont">{{ item.card_unique }}</span>
          </div>
          <div class="bottom-row flexbox flex-align-center flex-justify-between">
            <span class="label">{{ $t('formItem.secretKey') }}</span>
            <span class="cont whitespace-nowrap">{{ item.card_pwd }}</span>
          </div>
        </div>
      </div>
      <no-data :loading="loading" v-if="cardpwdList.length == 0"></no-data>
    </div>
  </div>
</template>
<script>
  import { throttle } from '@/static/js/common'
  export default {
    props: {},
    data() {
      return {
        cardpwdForm: {
          password: ''
        },
        cardpwdValid: 1,
        cardpwdList: [],
        orderId: '',
        loading: false
      }
    },
    computed: {},
    created() {
      let query = this.$route.query
      this.orderId = query.id || ''
      this.getCardpwdValid()
    },
    methods: {
      getCardpwdList() {
        let api = `/api/order/getCard`
        if (this.orderId) {
          api = api + '?order_goods_id' + this.orderId
        }
        this.$axios
          .get(api)
          .then(res => {
            this.loading = false
            this.cardpwdList = res
          })
          .catch(err => {
            this.cardpwdList = []
            this.loading = false
          })
      },
      getCardpwdValid() {
        this.$axios.get(`/api/order/valid`, { withCredentials: true }).then(res => {
          this.cardpwdValid = res.valid || 0
          if (this.cardpwdValid) {
            this.loading = true
            this.getCardpwdList()
          }
        })
      },
      checkCardpwd: throttle(
        function () {
          //{
          // headers:{ Cookie:'PHPSESSID=4eb8dtbcccgmpb3a95d1pd9ej4'}
          //}
          if (this.cardpwdForm.password) {
            this.$axios
              .post(`/api/order/checkPassword`, {
                password: this.cardpwdForm.password
              })
              .then(res => {
                this.getCardpwdValid()
              })
          }
        },
        2000,
        {
          leading: true,
          trailing: false
        }
      ),
      goOrderPay(item) {
        this.$router.push({
          path: this.localePath('/order/pay'),
          query: {
            no: item.order_info.order_no
          }
        })
      }
    }
  }
</script>
<style lang="less" scoped>
  .title {
    box-sizing: border-box;
    padding: 20px 24px 12px 24px;
    .row {
      padding-bottom: 8px;
      border-bottom: @border-1-fo;
    }
    .name {
      font-weight: 500;
      font-size: 22px;
      color: @font-color-14;
    }
    .btn {
      box-sizing: border-box;
      padding: 0;
      width: 58px;
      height: 32px;
      line-height: 32px;
      font-size: 16px;
      text-align: center;
      color: @font-color-26;
      border-radius: 25px;
      border: none;
    }
  }
  .tab-cont {
    width: 100%;
  }
  .tab-cont-cardpwd {
    .check {
      margin-top: 48px;
      .img {
        width: 88px;
        height: 88px;
      }
      .title {
        margin-top: 16px;
        font-weight: 600;
        font-size: 24px;
        color: @font-color-26;
      }
      .desc {
        margin-top: 8px;
        font-weight: 500;
        font-size: 12px;
        color: @font-color-99;
      }
      .label {
        display: none;
      }
      .input {
        margin-top: 24px;
        width: 371px;
        height: 48px;
        background: @color-f7;
        border-radius: 8px;
        /deep/ .el-input__inner {
          padding-left: 64px;
          height: 48px;
          background: @color-f7;
        }
        /deep/ .el-input__prefix {
          left: 12px;
          top: 12px;
          height: 24px;
        }
        .input-icon {
          width: 24px;
          height: 24px;
          // position: absolute;
          // top: 50%;
          // transform: translateY(-50%);
        }
        /deep/ .el-input__prefix {
          @apply flex items-center;
        }
      }
      .handle {
        margin-top: 16px;
        .theme-btn {
          width: 371px;
          height: 50px;
          line-height: 50px;
        }
      }
    }
    .list {
      padding: 0 24px;
      .item {
        margin-bottom: 20px;
        .info {
          padding: 0 20px;
          height: 50px;
          background: @color-f7;
          border-radius: 16px 16px 0px 0px;
        }
        .order {
          .label {
            font-weight: 500;
            font-size: 14px;
            color: @font-color-66;
          }
          .no {
            font-weight: 500;
            font-size: 14px;
            color: @theme-color;
          }
          .date {
            font-weight: 500;
            font-size: 14px;
            color: #b3b3b3;
          }
        }
        .bottom {
          padding: 20px;
          background: @color-ff;
          box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.02), 0px 1px 6px -1px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.03);
          border-radius: 0px 0px 16px 16px;
          .goods {
            padding-bottom: 20px;
            border-bottom: @border-1-fo;
            .goods-img {
              width: 56px;
              height: 56px;
              border-radius: 8px;
            }
            .goods-base {
              margin-left: 8px;
              .goods-title {
                font-weight: 500;
                font-size: 16px;
                color: @font-color-26;
              }
              .goods-desc {
                font-size: 12px;
                color: @font-color-66;
              }
            }
          }
          .bottom-row {
            margin-top: 20px;
            .label {
              font-weight: 500;
              font-size: 14px;
              color: @font-color-66;
            }
            .cont {
              font-weight: 500;
              font-size: 14px;
              color: @font-color-26;
            }
          }
        }
      }
      .item:last-child {
        margin-bottom: 0;
      }
    }
  }
  @media only screen and (min-width: 1200px) {
  }
  @media screen and (max-width: 992px) and (min-width: 768px) {
    .title {
      padding: 8px 16px;
      .search-comp {
        display: block;
      }
      .row {
        align-items: flex-end;
        padding-bottom: 8px;
        border-bottom: @border-1-fo;
      }
      .name {
        font-size: 20px;
      }
    }
    .tab-cont {
      width: 100%;
      margin-top: 6px;
      margin-bottom: 48px;
    }
    .tab-cont-cardpwd {
      .check {
        padding: 0 16px;
        margin-top: 16px;
        width: 375px;
        margin: 0 auto;
        .img {
          width: 88px;
          height: 88px;
        }
        .title {
          font-weight: 500;
          font-size: 24px;
          color: @font-color-14;
        }
        .desc {
          text-align: center;
          margin-top: 8px;
          max-width: 288px;
          font-weight: 400;
          font-size: 14px;
          color: @font-color-99;
        }
        .label {
          width: 100%;
          text-align: left;
          margin-top: 32px;
          display: block;
          font-size: 12px;
          color: @font-color-99;
        }
        .input {
          margin-top: 8px;
          width: 343px;
          height: 48px;
          background: @color-f7;
          border-radius: 8px;
          /deep/ .el-input__inner {
            padding-left: 48px;
            height: 48px;
            background: @color-f7;
          }
          /deep/ .el-input__prefix {
            left: 16px;
            top: 14px;
            height: 20px;
          }
          .input-icon {
            width: 20px;
            height: 20px;
          }
        }
        .handle {
          width: 100%;
          margin-top: 40px;
          .theme-btn {
            width: 100%;
            height: 48px;
            line-height: 48px;
          }
        }
      }
      .list {
        padding: 0 16px;
        margin-top: 16px;
        .item {
          margin-bottom: 20px;
          .info {
            padding: 0 12px;
            height: 40px;
            background: @color-f7;
            border-radius: 12px 12px 0px 0px;
          }
          .order {
            .label {
              font-weight: 500;
              font-size: 12px;
              color: @font-color-14;
            }
            .no {
              font-weight: 500;
              font-size: 12px;
              color: @theme-color;
            }
            .date {
              font-weight: 400;
              font-family: HelveticaNeue;
              font-size: 12px;
              color: @font-color-99;
            }
          }
          .bottom {
            padding: 16px 12px;
            background: @color-ff;
            box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.02), 0px 1px 6px -1px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.03);
            border-radius: 0px 0px 12px 12px;
            .goods {
              padding-bottom: 16px;
              border-bottom: @border-1-fo;
              .goods-img {
                width: 44px;
                height: 44px;
                border-radius: 8px;
              }
              .goods-base {
                margin-left: 10px;
                .goods-title {
                  font-weight: 500;
                  font-size: 12px;
                  color: @font-color-14;
                }
                .goods-desc {
                  font-size: 10px;
                  color: @font-color-99;
                }
              }
            }
            .bottom-row {
              margin-top: 16px;
              .label {
                font-weight: 500;
                font-size: 12px;
                color: @font-color-99;
              }
              .cont {
                font-weight: 500;
                font-size: 12px;
                color: @font-color-14;
              }
            }
          }
        }
        .item:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
  @media screen and (max-width: 767px) {
    .title {
      padding: 8px 16px;
      .search-comp {
        display: block;
      }
      .row {
        align-items: flex-end;
        padding-bottom: 8px;
        border-bottom: @border-1-fo;
      }
      .name {
        font-size: 20px;
      }
    }
    .tab-cont {
      width: 100%;
      margin-top: 6px;
      margin-bottom: 48px;
    }
    .tab-cont-cardpwd {
      .check {
        padding: 0 16px;
        margin-top: 16px;
        .img {
          width: 88px;
          height: 88px;
        }
        .title {
          font-weight: 500;
          font-size: 24px;
          color: @font-color-14;
        }
        .desc {
          text-align: center;
          margin-top: 8px;
          max-width: 288px;
          font-weight: 400;
          font-size: 14px;
          color: @font-color-99;
        }
        .label {
          width: 100%;
          text-align: left;
          margin-top: 32px;
          display: block;
          font-size: 12px;
          color: @font-color-99;
        }
        .input {
          margin-top: 8px;
          width: 343px;
          height: 48px;
          background: @color-f7;
          border-radius: 8px;
          /deep/ .el-input__inner {
            padding-left: 48px;
            height: 48px;
            background: @color-f7;
          }
          /deep/ .el-input__prefix {
            left: 16px;
            top: 14px;
            height: 20px;
          }
          .input-icon {
            width: 20px;
            height: 20px;
          }
        }
        .handle {
          width: 100%;
          margin-top: 40px;
          .theme-btn {
            width: 100%;
            height: 48px;
            line-height: 48px;
          }
        }
      }
      .list {
        padding: 0 16px;
        margin-top: 16px;
        .item {
          margin-bottom: 20px;
          .info {
            padding: 0 12px;
            height: 40px;
            background: @color-f7;
            border-radius: 12px 12px 0px 0px;
          }
          .order {
            .label {
              font-weight: 500;
              font-size: 12px;
              color: @font-color-14;
            }
            .no {
              font-weight: 500;
              font-size: 12px;
              color: @theme-color;
            }
            .date {
              font-weight: 400;
              font-family: HelveticaNeue;
              font-size: 12px;
              color: @font-color-99;
            }
          }
          .bottom {
            padding: 16px 12px;
            background: @color-ff;
            box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.02), 0px 1px 6px -1px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.03);
            border-radius: 0px 0px 12px 12px;
            .goods {
              padding-bottom: 16px;
              border-bottom: @border-1-fo;
              .goods-img {
                width: 44px;
                height: 44px;
                border-radius: 8px;
              }
              .goods-base {
                margin-left: 10px;
                .goods-title {
                  font-weight: 500;
                  font-size: 12px;
                  color: @font-color-14;
                }
                .goods-desc {
                  font-size: 10px;
                  color: @font-color-99;
                }
              }
            }
            .bottom-row {
              margin-top: 16px;
              .label {
                font-weight: 500;
                font-size: 12px;
                color: @font-color-99;
              }
              .cont {
                font-weight: 500;
                font-size: 12px;
                color: @font-color-14;
              }
            }
          }
        }
        .item:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
</style>
